<style scoped>
.index {
  height: 100%;
  display: flex;
  background-color: #fff;
}

.left {
  width: 256px;
  padding: 8px 24px;
  box-sizing: border-box;
}

.title {
  padding: 23px;
  text-align: center;
  font-size: 18px;
  color: #2c3e50;
}

.nav {
  width: 208px;
  height: 56px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #303133;
  border-radius: 10px;
  box-sizing: border-box;
  padding-left: 32px;
  cursor: pointer;
  margin-bottom: 10px;
}

.nav:hover {
  background-color: #e8f4ff;
}

.active {
  background-color: #ff5d47;
  color: #fff;
}

.active:hover {
  background-color: #ff5d47;
}

.nav img {
  margin-right: 16px;
}

.right {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.top {
  height: 70px;
  display: flex;
  justify-content: flex-end;
  color: #202224;
  align-items: center;
  padding: 0 20px;
  font-size: 14px;
}

.line {
  height: 32px;
  width: 1px;
  background-color: #e3e7ea;
  margin: 0 16px;
}

.route-view {
  flex: 1;
  overflow-y: scroll;
  background-color: rgb(244, 246, 247);
  padding: 20px;
  box-sizing: border-box;
}
</style>

<template>
  <div class="index">
    <div class="left">
      <div class="title">Music chatbot</div>
      <div class="nav-list">
        <div
          v-for="(item, index) in pages"
          @click="$router.push(item.path)"
          :key="index"
          :class="['nav', { active: $route.path == item.path }]"
        >
          <img
            v-show="$route.path != item.path"
            :src="loadImg(`../assets/${item.meta.icon}.png`)"
          />
          <img
            v-show="$route.path == item.path"
            :src="loadImg(`../assets/${item.meta.icon}a.png`)"
          />
          {{ item.meta.name }}
        </div>
      </div>
    </div>
    <div class="right">
      <div class="top">
        <div>中文</div>
        <div class="line"></div>
        <el-popover placement="bottom" :width="40" trigger="hover">
          <template #reference>
            <div class="semibold" style="cursor: pointer">
              {{ userInfo.account || "name" }}
            </div>
          </template>
          <div style="text-align: center; cursor: pointer" @click="logout">
            登出
          </div>
        </el-popover>
      </div>
      <div class="route-view">
        <RouterView @updateUser="getuserInfo" />
      </div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import { pages } from "../router/index.js";
import { RouterView } from "vue-router";
export default {
  components: {
    RouterView,
  },
  name: "index",
  data() {
    return {
      pages: [],
      userInfo: {},
      loginType: 0,
    };
  },
  created() {
    this.loginType = localStorage.getItem("loginType");
    this.pages = pages.filter((item) => item.meta.type == this.loginType);
    if (this.loginType == 1) {
      this.$router.push("/inviteList");
    } else {
      this.$router.push("/home");
    }
    if (!localStorage.getItem("userInfo")) {
      this.$router.push("/login");
    } else {
      this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
    }
    this.getuserInfo();
  },
  methods: {
    loadImg(url) {
      return new URL(url, import.meta.url).href;
    },
    logout() {
      localStorage.clear("token");
      this.$router.push("/login");
      location.reload();
    },
    async getuserInfo() {
      const res = await request.GET("/sys/sys_user/info", {
        account: localStorage.getItem("username"),
        password: localStorage.getItem("password"),
      });
      if (res.status == 100100) {
        this.userInfo = res.data;
      }
    },
  },
};
</script>
